import React, { FC, useEffect } from 'react'
import { Avatar, Layout, Menu, Dropdown, Space, Tooltip, message } from 'antd'
import { ExportOutlined, GithubOutlined, HomeOutlined, SettingOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import FullScreen from '@/components/FullScreen'
import headImg from '@/assets/default-head-02.png'
// import BreadCrumb from '@/components/BreadCrumb'
import { useStorage } from '@/hooks/common'
import { useStore } from '@/store'
import TagsView from '../TagsView'
import { Gitee } from '@/config'

const { Header } = Layout

type Props = {
  token?: string
}

const AppHeader: FC<Props> = () => {
  const { userStore } = useStore()
  const { localGet } = useStorage()
  const navigate = useNavigate()
  const { nickname } = localGet({ path: 'info' })

  const toLogin = () => {
    navigate('/login')
  }

  useEffect(() => {
    if (!nickname) {
      toLogin()
    }
  }, [nickname])

  const onDropMenu = (e: any) => {
    if (e.key === 'uppassword') {
      console.log('up')
    }
    if (e.key === 'logout') {
      userStore.logout()
      toLogin()
    }
  }

  // 设置
  const onSettings = () => {
    message.success('您点击了设置')
  }

  const dropMenu = (
    <Menu className="app-overlay-menu" onClick={onDropMenu}>
      <Menu.Item key="index">
        <Link to="/">
          <Space>
            <HomeOutlined />
            <span>首页</span>
          </Space>
        </Link>
      </Menu.Item>
      <Menu.Item key="gitee">
        <Space>
          <GithubOutlined />
          <a href={Gitee} target="_blank" rel="noopener noreferrer">项目地址</a>
        </Space>
      </Menu.Item>
      <Menu.Item key="uppassword" style={{ display: 'none' }}>修改密码</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout">
        <Space>
          <ExportOutlined />
          <span>登出</span>
        </Space>
      </Menu.Item>
    </Menu>
  )

  return (
    <Header className="app-header">
      <TagsView />
      {/* <BreadCrumb /> */}
      <div className="nav-menus Default">
        <div className="app-helper-menu">
          <Link to="/" target="_blank">
            <Tooltip title="首页">
              <div className="nav-menu-item">
                <HomeOutlined />
              </div>
            </Tooltip>
          </Link>
          <FullScreen />
          <Tooltip title="设置">
            <div className="nav-menu-item" onClick={onSettings}>
              <SettingOutlined />
            </div>
          </Tooltip>
          <div className="header-dropdown-wrap admin-info">
            <Dropdown overlayClassName="app-header-down" arrow overlay={dropMenu} placement="bottom" overlayStyle={{ right: '-130px', left: 0 }}>
              <div>
                <Avatar size={32} src={headImg} />
                <span className="app-name">{nickname}</span>
              </div>
            </Dropdown>
          </div>
        </div>
      </div>
    </Header>
  )
}

export default AppHeader
